2008/02/26

Recent entries from same category

  1. xtag と angular1 を足して2で割った感じに使える薄い JavaScript ライブラリ「sj.js」
  2. Web Component を簡単に作れる JavaScript ライブラリ「X-Tag」
  3. twitter.bat
  4. jQueryプラグインとして動作するGithub Badge作ってみた。
  5. XSLとjQuery/HTMLだけで作る、amazon最速検索

まぁ、ぶっちゃけ(なくても)「はてブちゃんねる」のパクリなんですが...
単純にwith_friendsのRSSをGoogle Ajax Feed API使ってパースしてるだけです。
コードはこんな感じ。
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAS_2fKEdj-fsDOrnYqd4nthQCjALL2TOLFFIzEhjgebS4V6SjnhTxtlSoL0NJ-Fa6B7tsqLuiiPI9Pg"></script>
<style type="text/css">
.twitter-2ch {
    background-color: #efefef;
    width: 400px;
    color: #000000;
    font-family: 'MS PGothic',sans-serif;
    padding: 1.0em;
}
#twitter_2ch_container a:visited {
    color: #660099;
}
#twitter_2ch_container a:active {
    color: #ff0000;
}
.twitter-2ch-title {
    color: red;
}
</style>
<script type="text/javascript"><!--
function twitter_2ch() {
  var container = document.getElementById("twitter_2ch_container");
  container.innerHTML = "";
  var img = document.createElement('img');
  img.src='http://mattn.kaoriya.net/images/ajax-loader.gif';
  container.appendChild(img);

  var twitterId = document.getElementById("twitterId").value;
  var feed = new google.feeds.Feed('http://twitter.com/statuses/friends_timeline/' + twitterId + '.rss');
  feed.setNumEntries(10);
  setTimeout(function() {
    feed.load(function(result) {
      if (!result.error) {
        var html = "";
        for (var i = 0; i < result.feed.entries.length; i++) {
          var entry = result.feed.entries[i];
          var link = entry["link"];
          var pubDate = new Date(entry["publishedDate"]).toLocaleString();
          var content = entry["content"];
          var author = content.replace(/:.+$/, '');
          var status = content.replace(/^[^:]+: /, '');
        html += (i+1) + ':<a href="' + link + '">以下、名無しにかわりましてfollowerがお送りします。</a>:' + pubDate + ' ID:' + author + '<br />';
        html += '<blockquote>' + status + '</blockquote>';
        }
        container.innerHTML = html;
      }
    });
  }, 100);
}
google.load("feeds", "1");
--></script>
<div class="twitter-2ch">
<span class="twitter-2ch-title">今何してる?</span>
twitter id:<input type="text" id="twitterId" value="mattn_jp"/>
<input type="button" onclick="twitter_2ch();" value="twitter→2ch"/><br />
<br />
<div id="twitter_2ch_container"></div>
</div>
で、実行画面は以下の通り
Posted at by